<template>
	<!-- goodlist商品列表 -->
	<view class="g_wp">
		<view class="g_nav">
			<view class="p_logo">
				<image src="../../static/logo.png" mode=""></image>
				<text>多米街商城-{{title}}</text>
			</view>
			<view class="nav_bar">
				<view class="order" style="margin: 8upx 20upx 0upx 5upx;">
					<image style="width: 40upx;height: 40upx;" @click="$navBack()" src="../../static/fanhui.png" mode=""></image>
				</view>
				<view class="serch">
					<input type="text" v-model="keywords" @confirm="searchTap" placeholder="搜索商品" />
					<text class="iconfont icon-sousuo"></text>
				</view>
				<view class="order" style="margin: 0 20upx;" @click="fenlei('/pages/category/category')" >
					<image style="width: 40upx;height: 40upx;" src="../../static/fenlei.png" mode=""></image>
					<view style="font-size: 20rpx;">分类</view>
				</view>
				<view class="order" @click="navOrder" >
					<image style="width: 40upx;height: 40upx;" src="../../static/dingdan.png" mode=""></image>
					<view style="font-size: 20rpx;">订单</view>
				</view>
			</view>
			<scroll-view class="nav_menu" scroll-x>
				<text :class="{active:menuIdx===item.id}" v-for="item in classList" :key="item.id"
					@click="menuTap(item.id)">{{item.name}}</text>
			</scroll-view>
		</view>
		<view class="g_body">
			<view class="g_list">
				<view class="list_item" v-for="item in list" @click="$navTo('/pages/product/product?id='+item.id)"
					:key="item.id">
					<image :src="item.thumb" mode=""></image>
					<!-- <text v-text="item.shareprice" style="position: absolute;background-color: rgba(0,0,0,0.5);border-radius: 6upx;padding:2upx 6upx;color: #fff;font-size: 24upx;bottom: 212upx;right: 10upx;"></text> -->
					<text class="list_title clamp">{{item.title}}</text>
					<view class="l_cart">
						<text class="money" style="color: #444;font-size: 26upx;font-weight: bold;">会员
							¥{{item.agentprice}}</text>

						<text style="text-decoration: line-through;font-size: 22upx;">￥{{item.productprice}}</text>
					</view>
					<!-- 					<view class="money">
						<text style="color: #555;font-size: 26upx;font-weight: bold;">会员价￥{{item.agentprice}}</text>

					</view> -->
					<view class="l_cart">
						<view class="l_level">
							<text class="label">VIP</text>
							<text class="money">{{item.vipprice}}</text>
						</view>
						<!-- <image @click.stop="addCart(item)" src="/static/jiagou.png" mode=""></image> --><!-- 加购图片 -->
					</view>
				</view>
			</view>
			<view class="empty_loading">
				<image v-show="isloading" src="../../static/business/loading.gif" mode=""></image>
				<text v-show="isempty">没有更多了~</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				brandid: '',
				title: '',
				badgeStyle: '',
				keywords: '',
				mycart: '',
				menuIdx: '',
				classList: [],
				page: 0,
				list: [],
				issearch: false,
				isempty: false,
				isloading: false,
				pid: "",
				cid: "",
				page: 0,
				page_total: 0,
				pageShow: 0,
				empty: false,
				order: '',
				by: '',
				cname: '',
			}
		},
		watch: {
			text() {
				this.badgeStyle = `width: ${String(this.text).length * 8 + 12}px`
			}
		},
		onReachBottom() {
			if (this.issearch) {
				this.searchList();
			} else {
				this.getList();
			}
		},
		onLoad(options) {
			this.pid = options.pid ? options.pid : '';
			this.cid = options.cid ? options.cid : '';
			this.cname = options.cname
			this.title = options.cname
			this.getList();
			uni.setNavigationBarTitle({
				title: this.cname
			})
		},
		methods: {
			fenlei(url){
				uni.navigateTo({
					url: url
				})
			},
			addCart(v) {
				if (v.nocart == 1) {
					this.$navTo('/pages/product/product?id=' + v.id);
					return;
				}
				this.$axios('Cart/add', "POST", 'shop', {
					optionid: 0,
					total: 1,
					id: v.id
				}).then(res => {
					if (res.data.code == 200) {
						uni.showToast({
							title: '添加成功',
						});
					}
				})
			},
			// getMycart() {
			// 	this.$axios('home/mycart', 'POST', 'shop').then(res => {
			// 		if (res.data.code == 200) {
			// 			this.mycart = res.data.data;
			// 		}
			// 	})
			// },
			getList() {
				this.isloading = true;
				this.isempty = false;
				this.page++;
				this.$axios('Lists/index', "POST", 'shop', {
					pcate: this.pid,
					ccate: this.cid,
					page: this.page,
					order: this.order,
					by: this.by
				}).then(res => {
					this.isloading = false;
					if (res.data.code == 200) {
						let data = res.data.data.goods;
						if(this.page==1){
							this.list=data;
							
						}else{
							this.list = [...this.list, ...data];
						}
						this.isempty = data.length <= 0;
					}
				})
			},
			menuTap(v) {
				if (v === this.menuIdx) return;
				this.menuIdx = v;
				this.keywords = '';
				this.issearch = false;
				this.page = 0;
				this.list = [];
				this.getList();
			},
			navOrder() {
				uni.setStorageSync('upOrderType', 1);
				this.$navTo('/pages/index/order');
			},
			searchTap() {
				if (this.keywords === '') {
					this.$api.msg('请输入搜索内容！');
					return;
				}
				this.issearch = true;
				this.menuIdx = '';
				this.page = 0;
				this.list = [];
				this.searchList();
			},
			searchList() {
				this.isloading = true;
				this.isempty = false;
				this.page++;
				this.$axios('Lists/index', 'POST', 'shop', {
					keywords: this.keywords,
					page: this.page,
					brandid:this.brandid
				}).then(res => {
					this.isloading = false;
					if (res.data.code == 200) {
						let data = res.data.data.goods;
						this.list = [...this.list, ...data];
						this.isempty = data.length <= 0;
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	@import '/store/icon.css';
	$bage-size: 12px;
	$bage-small: scale(0.7);
	$bage-height: 20px;

	page {
		background-color: #f2f2f2;
		font-size: $font-base;
	}

	.g_nav {
		background: $bg-color;
		color: #fff;
		position: fixed;
		top: 0;
		padding-top: calc(var(--status-bar-height) + 30upx);
		width: 100%;
		z-index: 200;

		.p_logo {
			display: flex;
			align-items: center;
			font-size: 34upx;

			image {
				height: 74upx;
				width: 74upx;
				margin: 0 20upx;
			}
		}

		.nav_bar {
			display: flex;
			align-items: center;
			padding: 10upx 20upx 6upx;

			.serch {
				background: #fff;
				border-radius: 40px;
				color: #303133;
				flex: 1;
				padding: 0 20upx 0 50upx;
				position: relative;

				input {
					height: 60upx;
				}

				.icon-sousuo {
					color: $font-color-dark;
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					left: 8upx;
				}
			}

			.cart {
				margin: 0 20upx;
				position: relative;

				.icon-gouwuche {
					font-size: 60upx;
				}

				.badge {
					/* #ifndef APP-PLUS */
					display: flex;
					/* #endif */
					justify-content: center;
					flex-direction: row;
					height: $bage-height;
					line-height: $bage-height;
					border-radius: 100px;
					background: #8405dc;
					text-align: center;
					font-family: 'Helvetica Neue', Helvetica, sans-serif;
					font-size: $bage-size;
					padding: 0px 6px;
					transform: $bage-small;
					position: absolute;
					top: -6upx;
					right: -12upx;
				}
			}

			.order {
				image {
					height: 60upx;
					width: 60upx;
				}
			}
		}
	}

	.nav_menu {
		background-color: #f2f2f2;
		color: #303133;
		white-space: nowrap;
		width: 100%;
		font-size: 34upx;

		text {
			display: inline-block;
			line-height: 80upx;
			position: relative;
			padding: 0 20upx;
		}

		.active {
			font-weight: bold;
		}

		.active::after {
			border-bottom: 4px $bg-color solid;
			content: '';
			position: absolute;
			bottom: 6upx;
			left: 50%;
			transform: translateX(-50%);
			width: 50upx;
		}
	}

	.g_body {
		// padding: 310upx 10upx 100upx;
		padding: 270rpx 10rpx 100rpx;

		.g_list {
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			.list_item {
				background: #fff;
				border-radius: 20upx;
				box-sizing: border-box;
				margin: 0 10upx 20upx;
				padding-bottom: 20upx;
				position: relative;
				width: calc(50% - 20upx);


				image {
					border-radius: 10upx;
					height: calc(50vw - 30upx);
					width: 100%;
				}

				.list_title {
					font-weight: bold;
					overflow: hidden;
					line-height: 45upx;
					padding: 0 10upx;
					white-space: nowrap;

				}

				.money {
					font-size: 22upx;
					padding: 10upx;

					text:nth-of-type(1) {
						color: #666;

					}

					text:nth-of-type(1)::before {
						// content: '￥';
						font-size: 20upx;
					}

					text:nth-of-type(2) {
						margin: 0 20upx;
						color: #999;
						text-decoration: line-through;
					}
				}

				.l_cart,
				.l_level {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 10upx 0 10upx;

					.l_level {
						font-size: 28upx;
						color: $bg-color;
						padding: 0;

						.label {
							font-size: 22upx;
							background: #000;
							border-radius: 10upx;
							color: #f3dd91;
							padding: 6upx 10upx;
							letter-spacing: 4upx;
						}

						.label1 {
							font-size: 22upx;
							background: #f3dd91;
							border-radius: 10upx;
							color: #7f6545;
							padding: 6upx 10upx;
						}

						.money {
							padding: 0 10upx;
							font-size: 32upx;
							font-weight: bold;
						}

						.money::before {
							content: '￥';
							font-size: 24upx;
							font-weight: bold;
						}
					}

					image {
						height: 40upx;
						width: 40upx;
					}
				}
			}
		}
	}

	.empty_loading {
		padding-top: 20upx;
		text-align: center;
		color: #0066CC;
	}

	.empty_loading image {
		height: 60upx;
		width: 60upx;
	}
</style>